import type { TFunction } from "i18next";
import Image from "next/image";
export interface PhotoCardProps {
  id: string;
  src: string;
  alt: string;
  author: string;
  device: string;
  lng: string;
  t: TFunction;
}

export const PhotoCard = ({ id, src, alt, author, device, lng, t }: PhotoCardProps) => {
  return (
    <a
      href={`/${lng}/community/${id}`}
      className="group block rounded-2xl overflow-hidden bg-white transition-all duration-300 hover:shadow-xl dark:bg-gray-900"
    >
      {/* 图片区域 - 高度自适应 */}
      <div className="relative overflow-hidden bg-gray-100">
        <Image
          src={src}
          alt={alt}
          width={300}
          height={400}
          className="w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105"
          loading="lazy"
        />
        {/* 视频标识（可选） */}
        {/* <div className="absolute top-2 right-2 bg-black/50 backdrop-blur-sm text-white text-xs px-2 py-1 rounded-full">
          <span>▶ 01:23</span>
        </div> */}
      </div>
      
      {/* 文字内容区域 */}
      <div className="p-3">
        <h3 className="text-sm font-medium text-gray-900 dark:text-white line-clamp-2 leading-relaxed mb-2">
          {alt}
        </h3>
        
        {/* 底部作者信息 */}
        <div className="flex items-center gap-2">
          <div className="w-5 h-5 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex-shrink-0" />
          <span className="text-sm text-gray-500 dark:text-gray-400 truncate">{author}</span>
        </div>
        
        {/* 点赞数 */}
        <div className="flex items-center gap-1 mt-2 text-xs text-gray-400">
          <span>❤️</span>
          <span>128</span>
        </div>
      </div>
    </a>
  );
};
